<template>
  <div class="theme-switch-container">
    <el-card class="theme-card">
      <template #header>
        <div class="card-header">
          <span>主题切换</span>
        </div>
      </template>
      <div class="theme-content">
        <p>当前主题: {{ currentTheme }}</p>
        <el-switch
          v-model="isDarkMode"
          active-text="深色模式"
          inactive-text="浅色模式"
          @change="toggleTheme"
        />
        <p class="system-info">
          系统默认主题: {{ systemTheme }}
        </p>

        <div class="theme-demo-container">
          <h3>主题效果示例</h3>
          <div class="demo-item">
            <div class="demo-box primary-color" />
            <span>主色调</span>
          </div>
          <div class="demo-item">
            <div class="demo-box success-color" />
            <span>成功色</span>
          </div>
          <div class="demo-item">
            <div class="demo-box warning-color" />
            <span>警告色</span>
          </div>
          <div class="demo-item">
            <div class="demo-box danger-color" />
            <span>危险色</span>
          </div>
          <div class="demo-item">
            <div class="demo-box info-color" />
            <span>信息色</span>
          </div>
        </div>

        <!-- 添加一些Element Plus组件示例 -->
        <div class="component-demo">
          <h3>组件示例</h3>
          <el-button type="primary">
            主要按钮
          </el-button>
          <el-button type="success">
            成功按钮
          </el-button>
          <el-button type="warning">
            警告按钮
          </el-button>
          <el-button type="danger">
            危险按钮
          </el-button>
          <el-button type="info">
            信息按钮
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { ElMessage } from 'element-plus';
import themeManager, { useTheme } from '@/utils/theme.js';

// 使用主题管理工具
const { isDarkMode: getIsDarkMode, toggleTheme: toggleThemeAction, getCurrentTheme } = useTheme();

// 检测系统主题
const isSystemDark = ref(false);
const systemTheme = computed(() => isSystemDark.value ? '深色' : '浅色');

// 当前主题状态
const isDarkMode = ref(false);
const currentTheme = computed(() => isDarkMode.value ? '深色模式' : '浅色模式');

// 初始化
onMounted(() => {
  // 检测系统主题偏好
  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  isSystemDark.value = mediaQuery.matches;
  
  // 同步主题状态
  isDarkMode.value = getIsDarkMode();
  
  // 监听系统主题变化
  mediaQuery.addEventListener('change', (e) => {
    isSystemDark.value = e.matches;
  });
});

// 切换主题
const toggleTheme = () => {
  const newTheme = toggleThemeAction();
  isDarkMode.value = newTheme;
  ElMessage({
    message: `已切换到${currentTheme.value}`,
    type: 'success'
  });
};

// 监听主题变化
watch(isDarkMode, (newValue) => {
  themeManager.setTheme(newValue);
});
</script>

<style scoped>
.theme-switch-container {
  padding: 20px;
  min-height: 100vh;
  transition: all 0.3s ease;
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
}

.theme-card {
  max-width: 600px;
  margin: 0 auto;
  transition: all 0.3s ease;
  background-color: var(--el-card-bg-color);
  border-color: var(--el-border-color);
}

.theme-demo-container {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--el-border-color);
}

.demo-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.demo-box {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.primary-color {
  background-color: var(--el-color-primary);
}

.success-color {
  background-color: var(--el-color-success);
}

.warning-color {
  background-color: var(--el-color-warning);
}

.danger-color {
  background-color: var(--el-color-danger);
}

.info-color {
  background-color: var(--el-color-info);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.theme-content {
  padding: 20px 0;
}

.system-info {
  margin-top: 20px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.component-demo {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--el-border-color);
}

.component-demo h3 {
  margin-bottom: 15px;
  color: var(--el-text-color-primary);
}

.component-demo .el-button {
  margin-right: 10px;
  margin-bottom: 10px;
}

/* 深色模式特定样式 */
:deep(.dark) .theme-switch-container {
  background-color: #1a1a1a;
}

:deep(.dark) .theme-card {
  background-color: #2c2c2c;
  border-color: #333333;
}

:deep(.dark) .theme-demo-container {
  border-top-color: #333333;
}

:deep(.dark) .component-demo {
  border-top-color: #333333;
}

/* 浅色模式特定样式 */
:deep(.light) .theme-switch-container {
  background-color: #f5f5f5;
}

:deep(.light) .theme-card {
  background-color: #ffffff;
  border-color: #dcdfe6;
}

:deep(.light) .theme-demo-container {
  border-top-color: #dcdfe6;
}

:deep(.light) .component-demo {
  border-top-color: #dcdfe6;
}
</style>